<template>
    <ayjDrawer class="sales-box" :title="'产品库存流水'" width="50%" ref="ayjDrawerFlowRef" :slotFooter="false"
        @closeFun="handleClose">
        <div ref="containerBoxRef" class="container_box bg_linear">
            <div ref="pointsBoxRef" class="mb5">
                <div class="font_size16 mb5 bold">商品信息</div>
                <div class="shop_card_box">
                    <shopCard :goods="goods"></shopCard>
                </div>
            </div>
            <!-- :style="{ height: dynamicHeight + 'px', overflowY: 'auto' }" -->
            <div class="flex_column flex1">
                <LoadList 
                    :loading="warehouse_flow_list_loading" 
                    :no-more="warehouse_flow_list_hasMore" 
                    :containerHeight="dynamicHeight" 
                    :distance="100"
                    @load-more="flowLoadMoreData"
                >
                    <div class="font_size16 bold mt5">库存流水</div>
                    <template v-if="tableList && tableList.length > 0">
                        <div class="table_box mb20" v-for="(item, index) in tableList" :key="index">
                            <div class="flex_row">
                                <div class="font_size14">日期：{{ item.day }}</div>
                            </div>
                            <div v-if="item.list && item.list.length > 0">
                                <el-table :data="item.list" style="width: 100%;" border size="mini">
                                    <el-table-column prop="act_txt" label="流水类型">
                                    </el-table-column>
                                    <el-table-column prop="qty_min" label="数量" sortable>
                                        <template #default="{ row }">
                                            <span :class="[row.qty_min > 0 ? 'font_green' : 'font_red']">{{ row.qty_min
                                            }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="txt" label="备注">
                                    </el-table-column>
                                    <el-table-column prop="log_id" label="操作">
                                        <template #default="{ row }">
                                            <div class="cursor_pointer">
                                                <span class="font_bule" @click="handleFlowDetailClick(row)">查看</span>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </template>
                    <empty v-else></empty>
                </LoadList>

            </div>
        </div>
        <ayjDialog ref="flowDetailRef" :title="'流水详情'" width="30%" @closeFun="flowDetailCancel" :slotFooter="false"
            :height="800">
            <div>
                <shopCard :goods="goodsDetail"></shopCard>
                <div class="costom-row">
                    <div class="costom-info">
                        <div class="title">流水类型：</div>
                        <div class="data">{{ warehouse_flow_detail.act_txt || '--' }}</div>
                    </div>
                    <div class="costom-info">
                        <div class="title">供 应 商：</div>
                        <div class="data">{{ warehouse_flow_detail.supp_name || "暂无单号" }}</div>
                    </div>
                    <div class="costom-info">
                        <div class="title">发生数量：</div>
                        <div class="data" :class="Number(warehouse_flow_detail.qty_min) > 0
                            ? 'color-g'
                            : 'color-r'
                            ">
                            {{ warehouse_flow_detail.qty_min || '--' }}
                        </div>
                    </div>
                    <div class="costom-info">
                        <div class="title">发生金额：</div>
                        <div class="data">{{ warehouse_flow_detail.amount || '--' }}</div>
                    </div>
                    <div class="costom-info">
                        <div class="title">发生时间：</div>
                        <div class="data">{{ warehouse_flow_detail.atime_txt || '--' }}</div>
                    </div>
                    <div class="costom-info">
                        <div class="title">经手人员：</div>
                        <div class="data">{{ warehouse_flow_detail.uid_cp_name || '--' }}</div>
                    </div>
                    <div class="costom-info">
                        <div class="title">相关单号：</div>
                        <div class="data">
                            {{
                                warehouse_flow_detail.odno ? warehouse_flow_detail.odno : "暂无单号"
                            }}
                        </div>
                    </div>
                    <div class="costom-info">
                        <div class="title">备注说明：</div>
                        <div class="data">{{ warehouse_flow_detail.txt || '--' }}</div>
                    </div>
                </div>
            </div>
        </ayjDialog>
    </ayjDrawer>
</template>

<script setup>
import { ref, reactive, onMounted, computed, getCurrentInstance, defineProps, defineExpose, watch } from '@vue/composition-api'
import { useDynamicHeight } from '@/hooks/useDynamicHeight'
import { usePurchaseState } from '@/pages/report/hooks/usePurchaseState.js'
import shopCard from '@/components/commV2/ShopCard/index.vue'
import https from "@/js/https/Https.js";

const {
    warehouse_flow_shop_info,
    warehouse_flow_list,
    warehouse_flow_row_info,
    warehouseFlowDetail,
    warehouse_flow_detail,
    warehouse_flow_list_loading,
    warehouse_flow_list_hasMore,
    flowLoadMoreData
} = usePurchaseState()

import config from "@/js/conf/Config.js";
import localStore from "@/js/LocalStore.js";

const ayjDrawerFlowRef = ref(null)
const containerBoxRef = ref(null)
const pointsBoxRef = ref(null)

const { proxy } = getCurrentInstance()
const editQtyRef = ref(null)

const goods = computed(() => {
    return {
        gdimg: warehouse_flow_shop_info.value.goods_img_small || '',
        gdname: warehouse_flow_shop_info.value.goods_name || '',
        brand: warehouse_flow_shop_info.value.spec_name || '',
        gd_brand: warehouse_flow_shop_info.value.spec_name || '',
    }
})

const goodsDetail = computed(() => {
    return {
        gdimg: warehouse_flow_detail.value.goods_img_small || '',
        gdname: warehouse_flow_detail.value.goods_name || '',
        brand: warehouse_flow_detail.value.spec_name || '',
    }
})

const tableList = computed(() => {
    return warehouse_flow_list.value
});

// 使用动态高度 hooks
const { dynamicHeight, updateHeight } = useDynamicHeight({
    containerRef: containerBoxRef,
    subtractRef: pointsBoxRef,
    extraHeight: 20 // 额外的间距
})

const open = async () => {
    ayjDrawerFlowRef.value.open();
    setTimeout(() => {
        updateHeight()
    }, 100)
}

const handleClose = () => {
    ayjDrawerFlowRef.value.close();
    editQtyRef.value.close()
}

const flowDetailRef = ref(null)
const handleFlowDetailClick = (row) => {
    warehouse_flow_detail.value = {}
    warehouse_flow_row_info.value = row
    warehouseFlowDetail()
    flowDetailRef.value.open()
}

const flowDetailCancel = () => {
    flowDetailRef.value.close()
}

onMounted(() => { })

defineExpose({
    open
})

</script>

<style lang="scss" scoped>
.shop_card_box {
    padding: 5px 10px 0;
    border-radius: 10px;
    border: 1px solid #E5E5E5;
}

::v-deep .el-dialog__body {
    padding: 10px 0 !important;
}

.container_box {
    box-sizing: border-box;
    padding: 0 4px;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.costom-row {
    border-bottom: 2px #f3f3f3 solid;
    padding-bottom: 10px;
    margin-bottom: 10px;

    &:last-child {
        border: none;
    }

    .costom-info {
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #f4f4f4;


        .title {
            width: 90px;
            color: #797979;
        }

        .data {
            color: #333;

            &.color-g {
                color: #23c064;
            }

            &.color-r {
                color: #fa5757;
            }
        }
    }
}
</style>
